<script setup lang="ts">
import NSwiper from '@/components/NSwiper.vue'
import NVideoList from '@/components/NVideoList.vue'
import NVideoMoreList from '@/components/NVideoMoreList.vue'
import { reactive } from 'vue'
import type { NVideoMoreListProps } from '@/components/types/types'

const propsOptions: NVideoMoreListProps = reactive({
  loadStatus: 'more',
  currentPage: 1,
  pageSize: 10,
  list: [
    {
      id: '1',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '2',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image: 'https://img95.699pic.com/photo/40168/8382.jpg_wh860.jpg',
    },
    {
      id: '3',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image: 'https://pic.ibaotu.com/00/94/62/35x888piC6c4.jpg-0.jpg!fw700',
    },
    {
      id: '4',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
  ],
})

// 最新课程
const getLatestCourse = () => {
  console.log('换一批')
}

// 热门推荐
const getRecommendedCourse = (options: NVideoMoreListProps) => {
  console.log('下一页')
  propsOptions.currentPage!++
  setTimeout(() => {
    propsOptions.list = [
      ...propsOptions.list!,
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
    ]
    propsOptions.loadStatus = 'more'
  }, 1000)
}

// 自定义滚动到底部被触发
const onScrolltolower = () => {
  console.log('加载更多')
  propsOptions.loadStatus = 'loading'
  getRecommendedCourse(propsOptions)
}
</script>

<template>
  <view class="navbar">
    <!-- 搜索条 -->
    <view class="search">
      <text class="icon-search"></text>
      <input type="text" placeholder="搜索课程视频" />
    </view>
  </view>
  <scroll-view @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
    <NSwiper />
    <view class="latest-title">
      <text class="first">最新课程</text>
      <button
        type="primary"
        size="mini"
        hover-class="latest-text-hover"
        class="icon-filter latest-btn"
        @click="getLatestCourse"
      >
        换一批
      </button>
    </view>
    <NVideoList />
    <view class="latest-title">
      <text class="first">热门推荐</text>
    </view>
    <NVideoMoreList v-bind="propsOptions" />
    <uni-load-more :status="propsOptions.loadStatus"></uni-load-more>
  </scroll-view>
</template>

<style lang="scss">
.scroll-view {
  height: 100%;
  padding-top: 100rpx;
}

.latest-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 10px 20rpx 30rpx;

  .first {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }

  .latest-btn {
    width: 150rpx;
    height: auto;
    font-size: 24rpx;
    color: #999;
    padding: 0;
    margin: 0;
    background-color: #fff;
  }

  .latest-btn:after {
    border: none;
    padding: 0;
  }

  .latest-text-hover {
    color: #f1dade;
  }
}

/* 自定义导航条 */
.navbar {
  background: linear-gradient(to bottom, #f1dade, #ffffff);
  background-size: cover;
  display: flex;
  flex-direction: column;
  padding: 15rpx;
  position: fixed;
  z-index: 1;
  width: 100%;
  .search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 26rpx;
    height: 64rpx;
    margin: 10rpx 20rpx;
    color: #333;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #fff;
  }

  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
}
</style>
